<template>
    <div class="m-t-10 system-page-background b-radius-4" v-bind="$attrs">
        <my-panel :title="props.title" icon="hetong">
            <template #handle>
                <el-button type="primary" @click="open = true"> 流程图 </el-button>
            </template>
            <div class="w-100% overflow-x-auto flex overflow-y-hidden p-b-20">
                <my-time-line :data="viewList" direction="horizontal" />
            </div>
        </my-panel>
        <el-dialog title="流程图" v-model="open" width="700" append-to-body>
            <el-image style="width: 100%; height: 320px" :src="processUrl" fit="contain" :preview-src-list="[processUrl]" v-if="processUrl" />
            <template #footer>
                <el-button @click.prevent="open = false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { arrayBufferToBase64 } from '@/utils/download';
import { flowRecordAction, getReadImages } from '@a/business';

const props = defineProps({
    procInsId: {
        required: true,
    },
    title: {
        type: String,
        default: '审批信息',
    },
});

const open = ref(false),
    viewList = ref([]),
    processUrl = ref('');

watch(
    () => props.procInsId,
    (val) => {
        if (val) {
            flowRecordAction({ procInsId: val }).then((res) => {
                viewList.value = res.data;
            });
            getReadImages({ proId: val }).then((res) => {
                processUrl.value = 'data:image/jpg;base64,' + arrayBufferToBase64(res);
            });
        }
    },
    { immediate: true }
);
</script>
